{% extends "base.html" %}
{% block main %}
    <div class="card hoverable" style="width: 60%;margin: 0 auto 16px;">
        <div class="card-content">
            <div class="card-title">添加学生</div>
            <form class="col s12">
                <div class="row">
                    <div class="input-field col s6">
                        <input id="studentID" type="text" class="validate">
                        <label for="studentID">学号</label>
                    </div>
                    <div class="input-field col s6">
                        <input id="name" type="text" class="validate">
                        <label for="name">姓名</label>
                    </div>
                </div>
                <div class="row">
                    <div class="input-field col s6">
                        <input id="age" type="number" class="validate">
                        <label for="age">年龄</label>
                    </div>
                    <div class="input-field col s6">
                        <input id="sex" type="text" class="validate">
                        <label for="sex">性别</label>
                    </div>
                </div>
                <div class="row">
                    <div class="input-field col s12">
                        <input id="score" type="number" class="validate">
                        <label for="score">成绩</label>
                    </div>
                </div>
                <div class="center">
                    <button type="button" class="waves-effect waves-light btn" id="send-button">添加</button>
                    <button type="reset" class="waves-effect waves-light btn" id="reset-button1">重置</button>
                </div>
            </form>
        </div>
    </div>
    <div class="card hoverable" style="width: 60%; margin: 0 auto 16px;">
        <div class="card-content">
            <div class="card-title">查找学生</div>
            <form class="col s12">
                <div class="row">
                    <div class="input-field col s12">
                        <input id="searchID" type="text" class="validate">
                        <label for="searchID">请输入学号</label>
                    </div>
                </div>
                <div class="center">
                    <button type="button" class="waves-effect waves-light btn" id="search-button">查询</button>
                    <button type="reset" class="waves-effect waves-light btn" id="reset-button2">重置</button>
                </div>
            </form>
        </div>
    </div>
    <div class="card hoverable" style="width: 60%;margin: 0 auto 16px;">
        <div class="card-content">
            <div class="card-title">所有学生数据</div>
            <div class="collection">
            {% for s in all %}
                <a class="collection-item" href={% url "info" s.studentID %}>
                    学号: {{ s.studentID }} 姓名: {{ s.name }} 年龄: {{ s.age }} 性别: {{ s.sex }} 成绩: {{ s.score }}
                </a>
            {% empty %}
                <h1 align="center">数据库没有学生数据</h1>
            {% endfor %}
            </div>
        </div>
    </div>
{% endblock %}

{% block js %}
<script type="text/javascript" charset="UTF-8">
    $(document).ready(function() {
        M.updateTextFields();
    });
    $('#send-button').click(function () {
        $.ajax({
            url: '/api_add/',
            type: "POST",
            data: {
                studentID: $('#studentID').val(),
                name: $('#name').val(),
                age: $('#age').val(),
                sex: $('#sex').val(),
                score: $('#score').val(),
            },
            dataType: 'json',
            success: function (back) {
                alert(back.status);
                location.reload();
            },
            error: function (code) {
                alert('Status Code: ' + code.status);
            },
        });
    });
    $('#search-button').click(function () {
        $.ajax({
            url: '/api_search/',
            type: 'POST',
            data: {
                studentID: $('#searchID').val(),
            },
            dataType: 'json',
            success: function (back) {
                alert(back.status);
            },
            error: function (code) {
                alert('Status Code: ' + code.status);
            },
        });
    });
</script>
{% endblock %}